<template>
  <div>
    <p :style="orderStatusStyle">{{ orderStatus }}</p>
    <el-tag
      v-if="orderItem.expressType === 2 && orderItem.isInsufficientBalance"
      class="mt-10"
      type="danger"
      effect="dark"
      >账户余额不足</el-tag
    >
  </div>
</template>

<script>
import { ORDER_STATUS } from '@/enum/order'
export default {
  name: 'OrderStatus',
  components: {},
  props: {
    refundStatus: {
      type: Number
    },
    orderItem: Object
  },
  data() {
    return {
      /**
        -1: 已取消,
        0: 待付款,
        10: 待发货,
        20: 已发货,
        30: 待评价
        31: 已评价, && finishFlag: false
        31: 已完成, && finishFlag: true
        40: 已关闭
       */
    }
  },
  computed: {
    // 订单状态
    orderStatus() {
      const { orderStatus, finishFlag } = this.orderItem
      if (orderStatus === 31 && finishFlag) {
        return '已完成'
      } else if (orderStatus === 31 && !finishFlag) {
        return '已评价'
      } else {
        return ORDER_STATUS[orderStatus]
      }
    },
    // 订单状态样式
    orderStatusStyle() {
      return {
        color: this.orderItem.orderStatus === 10 ? '#fc4541' : '#333'
      }
    }
  }
}
</script>
